<template>
  <div class="th-back-top" v-show="isShow" @click="ishim">
    <span class="bg-back2top2">
      <img src="https://img1.baidu.com/it/u=3167658049,491303308&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=634" alt="">
    </span>
  </div>
</template>

<script>
export default {
  name: 'BackTop',
  data () {
    return {
      isShow: false
    }
  },
  created () {
    const winHheiht = document.documentElement.clientHeight
    // 滚动超过屏幕高度显示
    window.addEventListener('scroll', () => {
      const scrollHheiht = document.documentElement.scrollTop
      // 屏幕高度的对比
      if (winHheiht < scrollHheiht) {
        this.isShow = true
      } else {
        this.isShow = false
      }
    })
  },
  methods: {
    ishim () {
      // 点击回到顶部的方法
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style scoped>
.th-back-top {
    position: fixed;
    right: 15px;
    bottom: 104px;
    height: 39px;
    width: 80px;
    z-index: 0;
    opacity: 0.8;
    text-align: right;
}

.bg-back2top2 {
    display: inline-block;
    /* background: url()
        no-repeat 0 0; */
    -webkit-background-size: 39px 39px;
    background-size: 39px 39px;
    width: 39px;
    height: 39px;
}
</style>
